<script setup lang="ts">
//这里还可以优化散点颜色以及二级地图
import { ref, onMounted, getCurrentInstance } from 'vue'
import { vw, vh } from '@/utils/viewSize'
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
import { Font } from 'three'
import { dataColorPaletteTask } from 'echarts/types/src/visual/style.js'
import type { cityPointType } from '.'
const mapData: any = china
// 地图注册，第一个参数的名字必须和option.geo.map一致
echarts.registerMap('china', /**/ mapData)
const points = ref([
  // 散点图数据
  {
    name: '广东',
    value: [113.266887, 23.133306],
    itemStyle: { color: ' rgb(255, 227, 137)' }
  } // 广东
])
const linesData = ref([
  {
    //一个包含两个到多个二维坐标的数组
    coords: [
      [116.407387, 39.904179],
      [113.266887, 23.133306]
    ]
  } // 北京->广东
])
const cityPoints = ref([
  { name: '北京', value: [39, 116, 25] },
  { name: '上海', value: [31, 121, 10] },
  { name: '广州', value: [23, 113, 7] },
  { name: '西安', value: [34, 108, 2] },
  { name: '成都', value: [30, 114, 9] },
  { name: '文登', value: [122.05, 37.2, 4] },
  { name: '上海', value: [121.48, 31.22, 18] },
  { name: '威海', value: [122.1, 37.5, 7] },
  { name: '承德', value: [117.93, 40.97, 46] },
  { name: '厦门', value: [118.1, 24.46, 34] },
  { name: '汕尾', value: [115.375279, 22, 2] },
  { name: '潮州', value: [116.63, 23.68, 82] },
  { name: '丹东', value: [124.37, 40.13, 33] },
  { name: '太仓', value: [121.1, 31.45, 11] },
  { name: '曲靖', value: [103.79, 25.51, 4] },
  { name: '烟台', value: [121.39, 37.52, 6] },
  { name: '福州', value: [119.3, 26.08, 33] }
])

const planePath = // 飞机svg
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
onMounted(() => {
  // getCurrentInstance().refs.charts 获取charts节点对象
  const Instance: any = getCurrentInstance()
  const refCharts: any = Instance.refs.charts
  const charts: any = echarts.init(refCharts)
  initCharts(charts)
  window.addEventListener('resize', () => {
    charts.resize()
  })
})

function initCharts(charts: any) {
  const option = {
    backgroundColor: '', // 背景颜色
    geo: {
      // 地图配置
      map: 'china', //使用 registerMap 注册的地图名称。
      left: 0,
      right: 0,
      top: 0,
      label: {
        // 图形上的文本标签
        normal: {
          // 通常状态下的样式
          show: true, //是否显示标签
          textStyle: {
            fontSize: vw(12),
            color: '#fff'
          }
        },
        emphasis: {
          //高亮状态下的多边形和标签样式。
          // 鼠标放上去高亮的样式
          textStyle: {
            color: 'rgb(17, 15, 46)',
            fontWeight: 'bold',
            textShadowOffsetX: 3,
            textShadowOffsetY: 6,
            textShadowColor: 'rgb(0,0,0,0.4)',
            textShadowBlur: 2
          }
        }
      },
      itemStyle: {
        // 地图区域的样式设置

        normal: {
          // 通常状态下的样式
          borderColor: ' rgb(255, 255, 255)',

          borderWidth: 1,
          areaColor:
            //地图区域的颜色
            'rgb(158, 202, 255)'
        },
        // 鼠标放上去高亮的样式
        emphasis: {
          borderColor: 'rgb(45, 11, 6)',
          areaColor: '  rgb(255, 70, 79)',
          borderWidth: 2.5,
          shadowColor: 'rgb(0,0,0,0.5)',
          shadowBlur: 10,
          shadowOffsetX: 5,
          focus: 'self'
        }
      }
    },

    series: [
      {
        // 散点系列数据
        type: 'effectScatter', // 带有涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo', //该系列使用的坐标系:地理坐标系
        // 特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
        effectType: 'ripple',
        // 配置何时显示特效。可选'render'和'emphasis' 。
        showEffectOn: 'render',
        rippleEffect: {
          // 涟漪特效相关配置。
          period: 10, // 动画的周期，秒数。
          scale: 4, // 动画中波纹的最大缩放比例。
          // 波纹的绘制方式，可选 'stroke' 和 'fill'。
          brushType: 'fill'
        },
        zlevel: 1, // 所有图形的 zlevel 值。
        data: points.value
      },
      {
        // 线条系列数据
        type: 'lines',
        zlevel: 2, //zlevel用于 Canvas 分层
        symbol: ['none', 'arrow'], // 标记的图形: 箭头
        symbolSize: 10, // 标记的大小
        effect: {
          // 线条特效的配置
          show: true,
          period: 6, // 特效动画的时间，单位s
          trailLength: 0, // 特效尾迹的长度。取值[0,1]值越大，尾迹越重
          symbol: planePath, // 特效图形的标记 可选'circle'等
          symbolSize: 15 // 特效标记的大小
        },
        lineStyle: {
          // 线条样式
          normal: {
            color: ' rgb(255, 70, 79)',
            width: 2, // 线条宽度
            opacity: 0.6, // 尾迹线条透明度
            curveness: 0.2 // 尾迹线条曲直度
          }
        },
        data: linesData.value
      },
      {
        type: 'scatter', //散点图
        coordinateSystem: 'geo', // 指明散点图使用的坐标系统，geo坐标系统
        zlevel: 1,
        // colorBy: 'data',
        symbol: 'circle',

        itemStyle: {
          normal: {
            color: '#fd9a95' // 散点的颜色
          }
        },
        data: cityPoints.value,
        symbolSize: function (item: number[]) {
          // console.log('value是data', item)
          return item[2] / 5
        },
        emphasis: {
          label: {
            show: true,
            formatter: `上市公司数量:{@[2]}`,
            borderWidth: 2,
            backgroundColor: '#fff',
            padding: [3, 2, 3, 2],
            borderColor: 'rgb(0, 0, 0)',
            borderRadius: 3
          }
        }
      }
    ]
  }

  charts.setOption(option)
}
</script>

<template>
  <div class="map-content">
    <div class="main" ref="charts"></div>
  </div>
</template>

<style scoped>
.map-content {
  width: vw(500);
  height: 400px;
  display: flex;
  position: relative;
}
.main {
  width: 100%;
  height: 100%;
  top: 0px;

  position: absolute;
}
</style>
